import React, { useState } from 'react';
import {
    Button,
    Col,
    Form,
    Input,
    Row,
    Select,
    Space,
    message
} from 'antd';
import {
    DownOutlined,
    UpOutlined,
    SearchOutlined,
    ReloadOutlined
} from '@ant-design/icons';

const { Option } = Select;

interface SearchFormProps {
    onSearch: (params: any) => void;
    onReset: () => void;
}

const Search: React.FC<SearchFormProps> = ({ onSearch, onReset }) => {
    const [form] = Form.useForm();
    const [expand, setExpand] = useState(false);

    const handleSearch = () => {
        form.validateFields().then(values => {
            // 移除空值
            Object.keys(values).forEach(key => {
                if (values[key] === undefined || values[key] === '') {
                    delete values[key];
                }
            });

            onSearch(values);
        });
    };

    const handleReset = () => {
        form.resetFields();
        onReset();
    };

    return (
        <Form
            form={form}
            name="teacher_advanced_search"
            style={{
                borderRadius: '6px',
                marginBottom: '10px'
            }}
        >
            <Row gutter={24}>
                <Col span={6}>
                    <Form.Item name="name" label="姓名">
                        <Input placeholder="请输入姓名" allowClear />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item name="sex" label="性别">
                        <Select placeholder="请选择性别" allowClear>
                            <Option value={1}>男</Option>
                            <Option value={0}>女</Option>
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item name="age" label="年龄">
                        <Input placeholder="请输入年龄" allowClear maxLength={3} />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item name="idCard" label="身份证号">
                        <Input placeholder="请输入身份证号" allowClear maxLength={18} />
                    </Form.Item>
                </Col>

                {expand && (
                    <>
                        <Col span={6}>
                            <Form.Item name="position" label="职务">
                                <Input placeholder="请输入职务" allowClear />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item name="phone" label="手机号">
                                <Input placeholder="请输入手机号" allowClear maxLength={11} />
                            </Form.Item>
                        </Col>
                    </>
                )}
            </Row>
            <div style={{ textAlign: 'right', marginBottom: '20px'}}>
                <Space size="small">
                    <Button
                        type="primary"
                        icon={<SearchOutlined />}
                        onClick={handleSearch}
                    >
                        搜索
                    </Button>
                    <Button
                        icon={<ReloadOutlined />}
                        onClick={handleReset}
                    >
                        重置
                    </Button>
                    <a
                        style={{ fontSize: 12 }}
                        onClick={() => setExpand(!expand)}
                    >
                        {expand ? <UpOutlined /> : <DownOutlined />} {expand ? '收起' : '展开'}
                    </a>
                </Space>
            </div>
        </Form>
    );
};

export default React.memo(Search);